<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - FTP管理系统'">FTP管理系统</title>

    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Element UI CSS -->
    <link th:href="@{/webjars/element-ui/2.15.13/lib/theme-chalk/index.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.7.2/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link th:href="@{/css/admin.css}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container-fluid">
                <a class="navbar-brand" href="/admin">
                    <i class="fas fa-server me-2"></i>FTP管理系统
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link" th:classappend="${#request.requestURI == '/admin' || #request.requestURI == '/admin/' || #request.requestURI == '/admin/index'} ? 'active'"
                               href="/admin">
                                <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:classappend="${#request.requestURI == '/admin/users'} ? 'active'"
                               href="/admin/users">
                                <i class="fas fa-users me-1"></i>用户管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:classappend="${#request.requestURI == '/admin/files'} ? 'active'"
                               href="/admin/files">
                                <i class="fas fa-folder me-1"></i>文件管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:classappend="${#request.requestURI == '/admin/logs'} ? 'active'"
                               href="/admin/logs">
                                <i class="fas fa-list-alt me-1"></i>操作日志
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:classappend="${#request.requestURI == '/admin/connections'} ? 'active'"
                               href="/admin/connections">
                                <i class="fas fa-plug me-1"></i>连接管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:classappend="${#request.requestURI == '/admin/monitor'} ? 'active'"
                               href="/admin/monitor">
                                <i class="fas fa-chart-line me-1"></i>系统监控
                            </a>
                        </li>
                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="fas fa-user-circle me-1"></i>管理员
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>设置</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i>退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <div class="container-fluid mt-4">
            <div class="row">
                <!-- 面包屑导航 -->
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/admin">首页</a></li>
                            <li class="breadcrumb-item active" th:text="${title}">当前页面</li>
                        </ol>
                    </nav>
                </div>

                <!-- 页面标题 -->
                <div class="col-12 mb-3">
                    <h2 th:text="${title}">页面标题</h2>
                </div>

                <!-- 页面内容 -->
                <div class="col-12">
                    <div th:replace="${content}">
                        <!-- 页面具体内容将在这里替换 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <!-- Vue.js -->
    <script th:src="@{/webjars/vue/3.3.4/dist/vue.global.js}"></script>
    <!-- Axios -->
    <script th:src="@{/webjars/axios/1.4.0/dist/axios.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
    <!-- Element UI -->
    <script th:src="@{/webjars/element-ui/2.15.13/lib/index.js}"></script>

    <!-- Custom JavaScript -->
    <script th:src="@{/js/admin-common.js}"></script>

    <!-- 页面特定的JavaScript -->
    <div th:replace="${scripts}">
        <!-- 页面特定脚本将在这里替换 -->
    </div>
</body>
</html>
